<template>
  <div class="comment" id="comment">
    <h1>发表回复</h1>
    <j-comment
      :title="title"
      :key-map="keyMap"
      :showNumber="2"
      :comment-datas="commentDatas"
      :imgHost="imgHost"
      @submitComment="submitComment"
    >
    </j-comment>
  </div>
</template>

<script>
import JComment from "./JComment/JComment.vue";
// import { getComment, addComment, filesHost } from "@/api/api";
import {mapState,mapMutations} from "vuex"
export default {
  name: "Comment",
  components: { JComment },
  data() {
    return {
      title:'',
      imgHost: "",
      code: "",
      keyMap: {
        pid: "parent_comment_id",
        id: "id",
        isAdmin: "admin_comment",
      },
      commentDatas: [],
    };
  },
  computed:{
    ...mapState(['userInfo'])
  },
  async fetch(){
      const resImgHost = await this.$api.filesHost();
      this.imgHost = resImgHost.data;

      const resCommentDatas = await this.$api.getComment({ article_id: this.$route.params.id });
      this.commentDatas = resCommentDatas.data;
      if(this.commentDatas.length>0){
        this.title='热门评论'
      }else{
        this.title='暂无评论'
      }
  },
  methods: {
    submitComment(item) {
      let data = {
        id: this.commentDatas.length?this.commentDatas[this.commentDatas.length-1].id + 1:1,
        admin_comment:
          this.$cookies.get("authorId") == this.userInfo.id ? 1 : 0, //0代表会员，1代表博主
        article_id: this.$route.params.id,
        avatar: this.userInfo.avatar
          ? this.userInfo.imgHost + this.userInfo.avatar
          : this.userInfo.avatar,
        create_time: this.$moment(new Date().getTime()).format(
          "YYYY年MM月DD日 hh:mm"
        ),
        email: "",
        nickname: this.userInfo.nickname,
        observer_id: this.userInfo.id,
        parent_comment_id: item.pid,
        content: item.content,
      };
      this.commentDatas.push(data);
      this.$api.addComment(data);
    },
  },
};
</script>

<style lang="less" scoped>
.comment {
  background: #fff;
  overflow: hidden;
  margin-top: 20px;
  h1 {
    font-size: 18px;
    border-left: 3px solid #108fcf;
    padding-left: 10px;
    margin: 20px;
  }
}
</style>